<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>基础数据查询</title>
    <link rel="stylesheet" href="${contextPath}/css/ElementCss/theme/index.css">
    <link rel="stylesheet" href="${contextPath}/css/home.css"/>
    <link rel="stylesheet" href="${contextPath}/css/homebaseLayer.css"/>
    <%--<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css"/>--%>


    <script src="${contextPath}/js/vue.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .el-table .cell {
            white-space: pre-line;
        }

        tbody {
            font-size: 14px !important;
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div class="all" v-cloak>
    <div id="main">
        <div style="display: none">
                <span id="sevenSpan" @click="sevenDayOpen()" class="tableHerl"> 查看七天数据 </span>
        </div>
        <input id="moreInput" type="hidden" v-model="moreInputVal"/> <%--作为中转数据的元素--%>
        <div class="allLeft">
            <!-- 左侧菜单栏 -->
            <div class="secMenu" :class="{ subactive: subisActive ,subclose: subisClose }">
                <div class="secMenuImgBut subButImg" v-bind:class="{subButImgClose: subButJudge }"
                     @click="secMenuBut"></div>
                <div class="subMenuFrom" v-show="subButShow">
                    <!-- 基础数据查询 -->
                    <div class="imgQueryDiv" v-show="queryReust">
                        <div class="queryDivTop">
                            <div class="queryCondition">查询条件</div>
                            <div class="queryDiv">
                                <el-select v-model="imageTypeSelectValue" placeholder="请选择区域" class="selectClass">
                                    <el-option v-for="item in imageTypeSelectData" :key="item.value"
                                               :label="item.satellite"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <%--<div class="queryDiv">--%>
                            <%--<div class="inquiryMode inquiryModeSelct">行政区域</div>--%>
                            <%--<div class="inquiryMode">经纬度</div>--%>
                            <%--<div class="inquiryMode">地图选择</div>--%>
                            <%--</div>--%>

                            <%--<temp-select v-bind:modevalue="baseQueryArea" v-bind:datavalue="regionOptions" title="请选择区域"--%>
                            <%--classname="queryDiv"></temp-select>--%>

                            <div class="queryDiv">
                                <%--<el-date-picker v-model="queryData" type="date" placeholder="选择日期" class="selectClass">--%>
                                <%--</el-date-picker>--%>
                                <el-date-picker class="historyDate" v-model="ImageDate" type="daterange"
                                                range-separator="至"
                                                start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>

                            </div>

                            <div class="queryDivButtom">
                                <%--<div class="baisCancl">取消</div>--%>
                                <div @click="queryFun(1)" class="baisCancl baisOk">查询</div>
                            </div>
                        </div>

                        <%--<div class="queryDivbottm">--%>
                        <%--<!-- 结果展示区域 -->--%>
                        <%--<div class="noReuslt" v-show="!queryShow">--%>
                        <%--<img src="${contextPath}/img/home/noResut.png"/><br/>--%>
                        <%--暂无数据--%>
                        <%--</div>--%>
                        <%--<div class="noReuslt" v-show="queryShow">--%>
                        <%--<div class="queryCondition">查询结果</div>--%>
                        <%--<div class="queryConditionTitle">--%>
                        <%--<div></div>&nbsp; 影像信息--%>
                        <%--<span> 更多</span>--%>
                        <%--</div>--%>
                        <%--<div class="resultData">--%>
                        <%--<div v-for="(data,index) in resultData" class="tableData">--%>
                        <%--<div class="tableDataPic"><img src="${contextPath}/img/home/noPic.png"></div>--%>
                        <%--<table class="listTable">--%>
                        <%--<tr>--%>
                        <%--<td colspan="2">数据标识:{{data.title}}</td>--%>
                        <%--</tr>--%>
                        <%--<tr>--%>
                        <%--<td>带条号:129</td>--%>
                        <%--<td>行编号:123</td>--%>
                        <%--</tr>--%>
                        <%--<tr>--%>
                        <%--<td>经度:116.32</td>--%>
                        <%--<td>纬度:39.33</td>--%>
                        <%--</tr>--%>
                        <%--<tr>--%>
                        <%--<td colspan="2">时间:2019-5-18 16:00:21</td>--%>
                        <%--</tr>--%>
                        <%--</table>--%>

                        <%--</div>--%>

                        <%--</div>--%>
                        <%--</div>--%>
                        <%--</div>--%>
                    </div>

                    <%--气象数据--%>
                    <div class="imgQueryDiv" v-show="weatherReust">
                        <div class="queryDivTop">
                            <div class="queryCondition">查询条件</div>
                            <div class="queryDiv">
                                <el-select v-model="WeatherWebDataValue" placeholder="请选择区域" class="selectClass">
                                    <el-option v-for="item in WeatherWebDataOption" :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>

                            <div class="queryDiv" v-show="areaSiteDisplay">
                                <el-select v-model="baseWeatherArea" placeholder="请选择区域" class="selectClass">
                                    <el-option v-for="item in baseAreaOption" :key="item.value" :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>

                            <div class="queryDiv">
                                <el-select v-model="baseWeatherSite" placeholder="请选择站点" class="selectClass">
                                    <el-option v-for="item in baseSiteOption" :key="item.value" :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <%--<temp-select v-bind:modevalue="baseQueryArea" v-bind:datavalue="regionOptions" title="请选择区域"--%>
                            <%--classname="queryDiv"></temp-select>--%>
                            <div class="queryDivButtom">
                                <%--<div class="baisCancl">取消</div>--%>
                                <div @click="queryWeaterFun('weather')" class="baisCancl baisOk">查询</div>
                            </div>
                        </div>
                    </div>

                    <el-dialog   :title="dialogTitle" :visible.sync="sevenDayLayerVisible" width="50%"  center   :append-to-body="true">
                        <iframe   class="iframeLayer"  v-bind:src="IframeSrc"   frameborder="no" scrolling="no"
                                allowtransparency="yes"></iframe>
                    </el-dialog>
                    <!-- 观测数据 -->
                    <div class="imgQueryDiv" v-show="observe">
                        <div class="queryDivTop">
                            <div class="queryCondition">查询条件</div>

                            <div class="queryDiv">
                                <el-select v-model="ObsDataValue" placeholder="请选择观测类型" class="selectClass">
                                    <el-option v-for="item in ObsDataOption" :key="item.value" :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>

                            <div class="queryDiv">
                                <el-select v-model="ObsSiteValue" placeholder="请选择站点" class="selectClass">
                                    <el-option v-for="item in ObsSiteOption" :key="item.id" :label="item.siteName"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>


                            <div class="queryDivButtom">
                                <%--<div class="baisCancl">取消</div>--%>
                                <div @click="queryWeaterFun('obs')" class="baisCancl baisOk">查询</div>
                            </div>
                        </div>
                    </div>
                    <!-- 历史数据 -->
                    <div class="imgQueryDiv" v-show="history">
                        <div class="queryDivTop">
                            <div class="queryCondition">查询条件</div>

                            <div class="queryDiv">
                                <el-select v-model="HistoryValue" placeholder="请选择数据类型" class="selectClass">
                                    <el-option v-for="item in HistoryOption" :key="item.value" :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="queryDiv">
                                <el-select v-model="HistorySiteValue" filterable placeholder="请选择数据类型"
                                           class="selectClass">
                                    <el-option v-for="item in HistorySiteOption" :key="item.value" :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>


                            <%--<div class="checkBut">--%>
                            <%--参数:--%>
                            <%--<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"--%>
                            <%--@change="handleCheckAllChange">全选--%>
                            <%--</el-checkbox>--%>
                            <%--<div style="margin: 15px 0;"></div>--%>
                            <%--<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">--%>
                            <%--<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>--%>
                            <%--</el-checkbox-group>--%>
                            <%--</div>--%>
                            <div class="queryDiv">
                                <el-date-picker class="historyDate" v-model="HistoryDate" type="daterange"
                                                range-separator="至"
                                                start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </div>

                            <div class="queryDivButtom">
                                <%--<div class="baisCancl">取消</div>--%>
                                <div @click="HistorySubmit(1)" class="baisCancl baisOk">查询</div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="menuLeft" v-for="(menu,index) in menuLefts" @click="leftSwitch(index)"
                 v-bind:class="{menuLeftS: leftNum== index}">
                <img v-bind:src="menu.url"/><br/>{{menu.title}}<br/>
                <hr/>
            </div>
        </div>
        <div class='allRight' v-show="!mapShow">
            <div class="rightDivTable">
                <!-- 这个是表格 -->
                <div class="rightTableDiv"
                     :class="{subtableActive: tableActiveShow,subtableActiveClose:!tableActiveShow }">
                    <div class="rightTableContent"
                         :class="{subtableAdd: tableActiveShow,subtableAddClose:!tableActiveShow }">

                        <%--香港天文台--%>
                        <el-table :data="tableData" stripe style="width: 100%" v-show="HistoryHK">
                            <el-table-column type="index" label="序号" width="80">
                            </el-table-column>
                            <el-table-column prop="siteId" label="站点名称">
                            </el-table-column>
                            <el-table-column :formatter="dateFormatData" prop="obsTime" label="时间" min-width="120px">
                            </el-table-column>
                            <el-table-column prop="obsQiya" label="气压">
                            </el-table-column>
                            <el-table-column prop="obsQiwenMax" label="最高气温">
                            </el-table-column>
                            <el-table-column prop="obsQiwenPj" label="平均气温">
                            </el-table-column>
                            <el-table-column prop="obsQiwenMin" label="最低气温">
                            </el-table-column>
                            <el-table-column prop="obsLudian" label="平均露点温度">
                            </el-table-column>
                            <el-table-column prop="obsShidu" label="相对湿度">
                            </el-table-column>
                            <el-table-column prop="obsYunliang" label="平均云量">
                            </el-table-column>
                            <el-table-column prop="obsYuliang" label="总雨量">
                            </el-table-column>
                            <el-table-column prop="obsFengxiang" label="盛行风向">
                            </el-table-column>
                            <el-table-column prop="obsFengsu" label="平均风速">
                            </el-table-column>
                        </el-table>


                        <%--潮汐数据--%>
                        <el-table :data="tableData" stripe style="width: 100%" v-show="HistoryChaoxi">
                            <el-table-column type="index" label="序号" width="80">
                            </el-table-column>
                            <el-table-column prop="sideId" label="站点名称">
                            </el-table-column>
                            <el-table-column :formatter="dateFormatData" prop="tideDate" label="日期" min-width="140px">
                            </el-table-column>
                            <el-table-column :formatter="dateFormatTime" prop="tideTime1" label="时间1" min-width="160px">
                            </el-table-column>
                            <el-table-column prop="tideHight1" label="高度1">
                            </el-table-column>
                            <el-table-column :formatter="dateFormatTime" prop="tideTime2" label="时间2" min-width="160px">
                            </el-table-column>
                            <el-table-column prop="tideHight2" label="高度2">
                            </el-table-column>
                            <el-table-column :formatter="dateFormatTime" prop="tideTime3" label="时间3" min-width="160px">
                            </el-table-column>
                            <el-table-column prop="tideHight3" label="高度3">
                            </el-table-column>
                            <el-table-column :formatter="dateFormatTime" prop="tideTime4" label="时间4" min-width="160px">
                            </el-table-column>
                            <el-table-column prop="tideHight4" label="高度4">
                            </el-table-column>
                        </el-table>

                        <%--水质数据--%>
                        <el-table :data="tableData" stripe style="width: 100%" v-show="HistoryShuizhi">
                            <el-table-column type="index" label="序号" width="80">
                            </el-table-column>
                            <el-table-column prop="siteId" label="站点名称">
                            </el-table-column>
                            <el-table-column :formatter="dateFormatData" prop="waterTime" label="时间" min-width="140px">
                            </el-table-column>
                            <el-table-column prop="waterOxygen" label="溶解氧 (毫克/升)">
                            </el-table-column>
                            <el-table-column prop="waterGerm" label="大肠桿菌 (菌落数/100毫升)">
                            </el-table-column>
                        </el-table>

                        <%--深圳气象局--%>

                        <el-table :data="tableData" stripe style="width: 100%" v-show="HistorySz">
                            <el-table-column type="index" label="序号" width="80">
                            </el-table-column>
                            <el-table-column prop="siteId" label="站点名称" min-width="100px">
                            </el-table-column>
                            <el-table-column :formatter="dateFormatData" prop="dataTime" label="时间" min-width="140px">
                            </el-table-column>
                            <el-table-column prop="dataType" label="类别" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH0" label="00:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH1" label="01:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH2" label="02:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH3" label="03:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH4" label="04:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH5" label="05:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH6" label="06:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH7" label="07:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH8" label="08:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH9" label="09:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH10" label="10:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH11" label="11:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH12" label="12:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH13" label="13:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH14" label="14:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH15" label="15:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH16" label="16:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH17" label="17:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH18" label="18:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH19" label="19:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH20" label="20:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH21" label="21:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH22" label="22:00" min-width="100px">
                            </el-table-column>
                            <el-table-column prop="dataH23" label="23:00" min-width="100px">
                            </el-table-column>
                        </el-table>

                        <%--太阳辐射--%>
                        <el-table :data="tableData" stripe style="width: 100%" v-show="HistorySun">
                            <el-table-column type="index" label="序号" width="80">
                            </el-table-column>
                            <el-table-column prop="siteId" label="站点名称">
                            </el-table-column>
                            <el-table-column :formatter="dateFormatData" prop="sunTime" label="时间" min-width="140px">
                            </el-table-column>
                            <el-table-column prop="sunGrossPath" label="太阳辐射总量">
                                <template slot-scope="scope">
                                    <el-image
                                            style="width: 170px; height: 80px"
                                            :src="scope.row.sunGrossPath"
                                            :preview-src-list="tableImg">
                                    </el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="sunDirectPath" label="太阳直射量">
                                <template slot-scope="scope">
                                    <el-image
                                            style="width: 170px; height: 80px"
                                            :src="scope.row.sunDirectPath"
                                            :preview-src-list="tableImg">
                                    </el-image>
                                </template>
                            </el-table-column>
                        </el-table>

                        <%--影像数据--%>
                        <el-table :data="tableData" stripe style="width: 100%" v-show="HistoryImage">
                            <el-table-column type="index" label="序号" width="80">
                            </el-table-column>
                            <el-table-column prop="fileName" label="文件名">
                            </el-table-column>
                            <el-table-column prop="fileType" label="文件类型">
                            </el-table-column>
                            <%--<el-table-column :formatter="fileUploadTime" prop="waterTime" label="上传时间"--%>
                            <%--min-width="140px">--%>
                            <%--</el-table-column>--%>
                            <%--<el-table-column :formatter="fileDownloadTime" prop="waterTime" label="下载时间"--%>
                            <%--min-width="140px">--%>
                            <%--</el-table-column>--%>
                            <el-table-column prop="fileSize" label="文件大小">
                            </el-table-column>
                            <el-table-column prop="fileLonglat" label="经纬度">
                            </el-table-column>
                            <el-table-column prop="sunDirectPath" label="操作" width="80">
                                <template slot-scope="scope">
                                    <span style="color: #409EFF;cursor: pointer"
                                          @click="downloadImagFile(scope.row)">下载</span>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="rightTableFoot">
                            <el-button @click="downloadHistory()" type="primary" style="float: left"
                                       v-show="!HistoryImage">全部导出
                            </el-button>
                            <el-pagination background layout="prev, pager, next"
                                           :total="pageCount"
                                           @current-change="handleCurrentChange">
                            </el-pagination>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>
    <div class='allRight'>
        <div id="viewDiv" class="rightDiv" v-show="mapShow"></div> <!-- 这个是地图 -->
    </div>

    <%--自定义弹窗--%>
    <div id="allLayerMore" style="display:none">
        <div id="moreDiv">
            <div class="populTop">
                <div class="populTopCilck">实时</div>
                <%--<input type="hidden" id="typeId" value="a fasdf afasdfasdf"/>--%>
                <div id="moreContent"><span id="moreSpan" style="float: right "
                                            onclick=" var typeID=document.getElementById('typeId').value;  document.getElementById('moreInput').value=typeID; document.getElementById('moreInput').dispatchEvent(new Event('input')); "> 更多</span>
                </div>
            </div>
            <div class="popuContent">
                <table id="LayerTable" class="popuTable"></table>
            </div>
        </div>
    </div>


</div>


</body>
<script src="${contextPath}/js/template.js"></script>
<script src="${contextPath}/js/elementIndex.js"></script>
<script src="${contextPath}/js/vueApp.js" type="text/javascript" charset="utf-8"></script>
<script src="${contextPath}/js/language/languages.js"></script>
<script src="${contextPath}/js/analogueData.js" type="text/javascript" charset="utf-8"></script> <!-- 模拟数据 -->
<script src="${contextPath}/js/vue-resource.js"></script>
<%--<script src="https://js.arcgis.com/4.14/"></script>--%>
<script type="text/javascript" src="${contextPath}/js/arcgisOfJs.js"></script>
<%--语言库--%>

<%--语言js--%>
<%--<script src="${contextPath}/js/language/vue-i18n.js"></script>--%>
<%--公共方法--%>
<script src="${contextPath}/js/homeJS/publicTool.js"></script>

<script src="${contextPath}/js/homeJS/homebaseData.js"></script>
</html>
